<template>
  <el-dialog
    width='30%'
    title='修改个人基本信息'
    :visible.sync='editVisible'
    :modal-append-to-body='false'
    :close-on-click-modal='false'
    :close-on-press-escape='false'
    @close='closeBox'
  >
    <el-form :model='form' :rules='rules' ref='form' label-width='120px' >
      <el-row type='flex' class='row-bg' justify='start'>
        <el-col :span='18' class='grid-content'>
          <el-form-item label='账号：' prop='username'>
            <el-input size='small' v-model='form.username' disabled autocomplete='off'></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type='flex' class='row-bg' justify='start'>
        <el-col :span='18' class='grid-content'>
          <el-form-item label='姓名：' prop='name'>
            <el-input size='small' placeholder="请输入姓名" v-model='form.name' autocomplete='off'></el-input>
          </el-form-item>
        </el-col>
      </el-row>


      <el-row type='flex' class='row-bg' justify='start'>
        <el-col :span='18' class='grid-content'>
          <el-form-item label='电话号码：' prop='phone'>
            <el-input size='small' placeholder="请输入电话号码" v-model='form.phone' autocomplete='off' :maxlength='11'></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row justify='start' align='middle'>
        <el-col :span='12' class='grid-content'>
          <el-form-item label='性别:' prop='sex'>
            <el-radio-group size='small' v-model='form.sex'>
              <el-radio :label='true'>男</el-radio>
              <el-radio :label='false'>女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-divider></el-divider>
      <el-row justify='end' align='middle'>
        <el-col :span='24'>
          <el-form-item style='float: right'>
            <el-button @click="cancel('form')">取 消</el-button>
            <el-button type='primary' @click="submit('form')">确 定</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script>
export default {
  computed: {},
  data() {
    return {
      editVisible: true,

      form: {
        username: '',
        name: '',
        phone: '',
        sex: true,
      },
      rules: {
        username: [{ required: true, message: '请填写账号', trigger: 'blur' }],
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        phone: [
          { required: true, validator: this.checkPhone, trigger: 'blur' },
        ],
        sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
      },
    };
  },
  created() {

    this.form = Object.assign({}, this.form, JSON.parse(window.localStorage.getItem('user')));
  },
  mounted() {},
  methods: {
    closeBox() {
      this.editVisible = false;
      this.$emit('home-sys-edit-user-close-finish');
    },
    cancel() {
      this.editVisible = false;
      this.$refs['form'].resetFields();
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$WLoading();

          this.$postJson('/user/update', {
            id: this.form.id,
            name: this.form.name,
            phone: this.form.phone,
            sex: this.form.sex,
            roleId: this.form.roleIds,
            enabled: true

          })
            .then((result) => {
              if (result.code == 200) {
                this.$message.success(result.msg);
                this.getUserInfo();
                //关闭弹框并刷新列表
                this.closeBox();
              } else this.$message.error(result.msg);
              this.$cancelLoading();
            })
            .catch((error) => {
              //添加用户异常
              this.$message.error('修改失败');
              this.$cancelLoading();
            });
        } else {
          return false;
        }
      });
    },
    getUserInfo () {
      this.$get('/simple/user/info')
      .then(reponse => {
        if(reponse.code == 200) {
          window.localStorage.setItem('user', JSON.stringify(reponse.data));
        }else {
          this.$message.error(reponse.msg);
        }
      }).catch(err =>{
        this.$message.error('获取用户信息异常！');
      })
    }
  },
};
</script>

<style lang='scss' scoped>
.el-select {
  width: 100%;
}

.vue-treeselect__input {
  border: 0 !important;
}

/* 上传样式 start */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}


/* 上传样式 end */
</style>
